<!DOCTYPE html>
<html>
<head>
    <title>文件共享服务</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        .header { display: flex; justify-content: space-between; align-items: center; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; }
        th { background-color: #f2f2f2; font-weight: bold; }
        tr:hover { background-color: #f5f5f5; }
        .upload-form { margin: 20px 0; }
        .instructions { background: #f9f9f9; padding: 15px; border-radius: 5px; margin-top: 20px; }
        pre { background: #eee; padding: 10px; border-radius: 3px; overflow-x: auto; }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>文件共享服务</h1>
            <p>端口: {{ port }}</p>
        </div>
        
        <div class="upload-form">
            <h2>上传文件</h2>
            <form method="post" enctype="multipart/form-data" action="/upload">
                <input type="file" name="file" required>
                <input type="submit" value="上传">
            </form>
        </div>

        <h2>共享文件列表</h2>
        {% if files %}
        <table>
            <thead>
                <tr>
                    <th>文件名</th>
                    <th>大小</th>
                    <th>修改时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for file in files %}
                <tr>
                    <td>{{ file.name }}</td>
                    <td>{{ file.size }}</td>
                    <td>{{ file.mtime }}</td>
                    <td><a href="{{ file.url }}">下载</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p>共享目录为空</p>
        {% endif %}

        <div class="instructions">
            <h3>使用说明</h3>
            <p><strong>浏览器访问：</strong> <a href="http://localhost:{{ port }}">http://localhost:{{ port }}</a></p>
            
            <p><strong>命令行上传：</strong></p>
            <pre>curl -F "file=@本地文件路径" http://localhost:{{ port }}/upload</pre>
            
            <p><strong>命令行下载：</strong></p>
            <pre>curl -O http://localhost:{{ port }}/download/文件名</pre>
            <pre>wget http://localhost:{{ port }}/download/文件名</pre>
        </div>
    </div>
</body>
</html>